/**
 * 节点输入输出展示组件
 */
<template>
  <div class="flex items-center">
    <p class="node-sub-text" style="margin-right: 10px" v-if="title">{{title}}</p>
    <div class="typeof-list" ref="typeofRef">
      <template v-if="showTooltip">
        <Tooltip
          theme="light"
          transfer
          :content="item[valueName]"
          placement="top"
          v-for="(item, i) in valueList"
          :key="i"
        >
          <div class="typeof-item" v-if="item[nameLabel]">{{ item[nameLabel] }}</div>
          <div v-else class="typeof-item warning">未定义</div>
        </Tooltip>
      </template>
      <template v-else v-for="(item, i) in valueList"  :key="i">
        <div class="typeof-item" v-if="item[nameLabel]">{{ item[nameLabel] }}</div>
        <div v-else class="typeof-item warning">未定义</div>
      </template>
    </div>
    <Poptip
      placement="bottom"
      trigger="hover"
      width="240"
      transfer
      v-show="showMore"
    >
      <div class="more-btn">
        <Icon type="ios-more" />
      </div>
      <template #content>
        <div class="typeof-list inbox">
          <template v-if="showTooltip" >
            <Tooltip
              theme="light"
              transfer
              :content="item[valueName]"
              placement="top"
              v-for="(item, i) in valueList"
              :key="i"
            >
              <div class="typeof-item" v-if="item[nameLabel]">{{ item[nameLabel] }}</div>
              <div v-else class="typeof-item warning">未定义</div>
            </Tooltip>
          </template>
          <template v-else v-for="(item, i) in valueList"  :key="i">
            <div class="typeof-item" v-if="item[nameLabel]">{{ item[nameLabel] }}</div>
            <div v-else class="typeof-item warning">未定义</div>
          </template>
        </div>
      </template>
    </Poptip>
  </div>
</template>
<script setup>
import { ref, watch, onMounted } from 'vue';

const props = defineProps({
  valueList: {
    type: Array,
    default: () => []
  },
  title: {
    type: String,
    default: ''
  },
  valueName: {
    type: String,
    default: 'vartype'
  },
  nameLabel: {
    type: String,
    default: 'varname'
  },
  showTooltip: {
    type: Boolean,
    default: true,
  }
})

const typeofRef = ref(null);
const showMore = ref(false);
const changeShowMore = () => {
  const { offsetWidth } = typeofRef.value;
  showMore.value = offsetWidth >= 260;
}

onMounted(() => {
  changeShowMore()
})

watch(props.valueList, (newVlue) => {
  if(newVlue) {
    changeShowMore()
  }
},{ deep: true, flush: 'post' });

</script>
